<template>
  <div id='turnout'>
      <com-head :opacity='0'>金币转出</com-head>
      <p class="yuoe">金币余额：<span>{{balance}}</span></p>
      <div class="turnout">
          <div class="notice">
            <div class="left">
                <p>对方账户</p>
                <input type="text" v-model="other" placeholder="请输入对方会员账户">
            </div>
        </div>
        <div class="notice">
            <div class="left">
                <p>确认账户</p>
                <input type="text" v-model="myaccount" placeholder="请再次输入对方会员账户">
            </div>
        </div>
        <div class="notice">
            <div class="left">
                <p>转出金额</p>
                <input type="text" v-model="money" :placeholder="maxmoney">
            </div>
        </div>
      </div>
      <div class="item"><span>二级密码</span><input type="password" v-model="safepsw" placeholder="请输入二级密码"></div>

      <com-button :click="turnout" :disabled="disabled">确定转出</com-button>
  </div>
</template>

<script>
export default {
  name: "turnout",
  data() {
    return {
      disabled: false,
      balance: "",
      other: "",
      myaccount: "",
      money: "",
      maxmoney: "",
      safepsw: ""
    };
  },

  computed: {},

  created() {},

  mounted() {
    this.loading();
  },

  methods: {
    loading() {
      this.axios
        .post("apiindex/moneylog", {
          token: this.token()
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.balance = data.data.regcur;
            this.maxmoney = `最多可转出金币${data.data.regcur}`;
            this.$bus.$emit("toast", data.data);
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    turnout() {
      if (!this.other||!this.myaccount||!this.money||!this.safepsw) {
        this.$bus.$emit("toast", "输入信息不能为空");
      } else if (this.other != this.myaccount) {
        this.$bus.$emit("toast", "俩次输入账户不一致");
      } else {
        this.disabled = true;
        this.axios
        .post("apiindex/turn_out", {
          token: this.token(),
          user_num: this.other,
          user_num1: this.myaccount,
          num: this.money,
          sale_code: this.safepsw
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.disabled = false;
            // this.$router.push('userCenter');
            this.$bus.$emit("toast", data.data);
            this.$router.push('turnout');
            this.other = '';
            this.myaccount = '';
            this.money = '';
            this.safepsw = '';
            this.loading();
          } else if (data.code === "204") {
            this.disabled = false;
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    }
  }
};
</script>
<style lang='scss' scoped>
#turnout {
  text-align: center;
  .com_button {
    width: 686px;
  }
  .yuoe {
    text-align: left;
    padding-left: 32px;
    font-size: 28px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    line-height: 82px;
    span {
      color: #b81919;
    }
  }
  .turnout {
    text-align: left;
    width: 750px;
    height: 554px;
    background: rgba(255, 255, 255, 1);
    .notice {
      margin: 0 32px;
      height: 176px;
      border-bottom: 1Px solid #ddd;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      .left {
        width: 534px;
        p:nth-of-type(1) {
          padding-top: 15px;
          font-size: 30px;
          color: #000;
          line-height: 85px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-of-type(2) {
          font-size: 26px;
          color: #999;
          line-height: 40px;
        }
      }
    }
  }
  .item {
    margin: 0px 32px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1Px solid rgba(238, 238, 238, 1);
    line-height: 102px;
    span {
      width: 200px;
      text-align: left;
    }
    input {
      width: 450px;
      // height: 52px;
      text-align: right;
      font-size: 30px;
      margin-right: 0;
      color: #054a5e;
    }
    input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #999;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #999;
    }

    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #999;
    }

    input:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #999;
    }
  }
}
</style>